/**
 * waterMark.js
 * 公共水印
 * 调用drawImage、drawWaterMark方法至少需传入watermark_content_img
 * @author HLonlin <1021944439@qq.com>
 */
// 默认设置
let defaultSettings = {
  watermark_type: 'string', // 水印类型 string：文字 || iamge：图片 || both：图文
  watermark_alpha: 0.5, // 水印透明度 0：透明 || 1：不透明 可使用小数
  watermark_zIndex: 9999, // 水印层级
  watermark_angle: 0, // 水印倾斜度
  watermark_pointerEvents: 'none', // 阻断水印点击穿透 none：可穿透
  // 水印容器
  watermarl__container_id: 'waterMark', // 水印容器id
  watermark_container_width: '100%', // 水印容器宽度
  watermark_container_height: '100%', // 水印容器高度
  watermark_container_position: 'fixed', // 水印容器定位方式
  watermark_container_x: 0, // 水印容器x轴坐标
  watermark_container_y: 0, // 水印容器y轴坐标
  // 水印内容
  watermark_content_width: 300, // 水印内容宽度
  watermark_content_height: 150, // 水印内容高度
  watermark_content_x: 10, // 水印内容X轴坐标
  watermark_content_y: 100, // 水印内容Y轴坐标
  watermark_content_spaceX: 10, // 多个水印内容X轴间隙
  watermark_content_spaceY: 0, // 多个水印内容Y轴间隙
  watermark_content_fontSize: 16, // 水印内容字体大小
  watermark_content_font: 'Vedana', // 水印内容字体
  watermark_content_textAlign: 'left', // 水印内容水平对齐方式
  watermark_content_textBaseline: 'Middle', // 水印内容对齐基线
  watermark_content_color: '#c8c8c8', // 水印内容颜色 若需字体透明 "#xxxxxx00"-"#xxxxxxff" 00:0% || ff:100%
  watermark_content_rotate: (-20 * Math.PI) / 180, // 水印内容倾斜度
  watermark_content_txt: 'waterMark', // 水印默认内容
  watermark_content_img: '' // 水印默认图片
}

// 绘制准备
function beforeDraw (setting = {}) {
  // 替换默认值
  const targetSettings = Object.assign(defaultSettings, setting)
  // 清除旧水印
  const id = targetSettings.watermarl__container_id
  if (document.getElementById(id) !== null) {
    document.querySelector(`#${id}`).remove()
  }
  // 创建水印容器
  const mask_div = document.createElement('div')
  mask_div.id = id
  // 设置水印容器样式
  mask_div.style.position = targetSettings.watermark_container_position
  mask_div.style.left = targetSettings.watermark_container_x + 'px'
  mask_div.style.top = targetSettings.watermark_container_y + 'px'
  mask_div.style.zIndex = targetSettings.watermark_zIndex
  mask_div.style.overflow = 'hidden'
  // mask_div.style.filter="alpha(opacity=50)" // 兼容IE9以下的透明度设置 ;
  mask_div.style.opacity = targetSettings.watermark_alpha
  mask_div.style.width = targetSettings.watermark_container_width
  mask_div.style.height = targetSettings.watermark_container_height
  mask_div.style.transform =
    'rotate(-' + targetSettings.watermark_angle + 'deg)'
  mask_div.style.OTransform =
    'rotate(-' + targetSettings.watermark_angle + 'deg)'
  mask_div.style.msTransform =
    'rotate(-' + targetSettings.watermark_angle + 'deg)'
  mask_div.style.MozTransform =
    'rotate(-' + targetSettings.watermark_angle + 'deg)'
  mask_div.style.webkitTransform =
    'rotate(-' + targetSettings.watermark_angle + 'deg)'
  mask_div.style.pointerEvents = targetSettings.watermark_pointerEvents // 水印不遮挡页面的点击事件
  // 创建并设置画布
  const mask_canvas = document.createElement('canvas')
  mask_canvas.width = targetSettings.watermark_content_width
  mask_canvas.height = targetSettings.watermark_content_height
  const mask_context = mask_canvas.getContext('2d')
  mask_context.rotate(targetSettings.watermark_content_rotate) // 水印内容倾斜度
  return { targetSettings, id, mask_div, mask_canvas, mask_context }
}

// 绘制图片水印 drawImageWaterMark({  watermark_content_img: "../../../static/login-02.png" });
export const drawImageWaterMark = setting => {
  const {
    targetSettings,
    id,
    mask_div,
    mask_canvas,
    mask_context
  } = beforeDraw(setting)
  const img = document.createElement('img')
  img.src = targetSettings.watermark_content_img
  img.style.display = 'none'
  document.body.appendChild(img)
  img.onload = function () {
    mask_context.drawImage(
      img,
      targetSettings.watermark_content_x,
      targetSettings.watermark_content_y,
      img.width,
      img.height
    )
    // 水印容器将绘制的水印内容设为背景
    mask_div.style.background =
      'url(' + mask_canvas.toDataURL('image/png') + ') left top repeat'
    document.body.removeChild(img)
  }
  // 插入水印
  document.body.appendChild(mask_div)
  return id
}

// 绘制文字水印 drawStringWaterMark();
export const drawStringWaterMark = setting => {
  const {
    targetSettings,
    id,
    mask_div,
    mask_canvas,
    mask_context
  } = beforeDraw(setting)
  mask_context.font = `${targetSettings.watermark_content_fontSize}px ${targetSettings.watermark_content_font}`
  mask_context.fillStyle = targetSettings.watermark_content_color
  mask_context.textAlign = targetSettings.watermark_content_textAlign
  mask_context.textBaseline = targetSettings.watermark_content_textBaseline
  mask_context.fillText(
    targetSettings.watermark_content_txt,
    targetSettings.watermark_content_x,
    targetSettings.watermark_content_y
  )
  // 水印容器将绘制的水印内容设为背景
  mask_div.style.background =
    'url(' + mask_canvas.toDataURL('image/png') + ') left top repeat'
  // 插入水印
  document.body.appendChild(mask_div)
  return id
}

// 绘制图文水印 drawWaterMark({ watermark_content_img: "../../../static/login-02.png" });
export const drawWaterMark = setting => {
  const {
    targetSettings,
    id,
    mask_div,
    mask_canvas,
    mask_context
  } = beforeDraw(setting)
  const img = document.createElement('img')
  img.src = targetSettings.watermark_content_img
  img.style.display = 'none'
  document.body.appendChild(img)
  img.onload = function () {
    mask_context.drawImage(
      img,
      targetSettings.watermark_content_x,
      targetSettings.watermark_content_y,
      img.width,
      img.height
    )
    // 水印容器将绘制的水印内容设为背景
    mask_div.style.background =
      'url(' + mask_canvas.toDataURL('image/png') + ') left top repeat'
    document.body.removeChild(img)
  }
  mask_context.font = `${targetSettings.watermark_content_fontSize}px ${targetSettings.watermark_content_font}`
  mask_context.fillStyle = targetSettings.watermark_content_color
  mask_context.textAlign = targetSettings.watermark_content_textAlign
  mask_context.textBaseline = targetSettings.watermark_content_textBaseline
  mask_context.fillText(
    targetSettings.watermark_content_txt,
    targetSettings.watermark_content_x,
    targetSettings.watermark_content_y
  )
  // 水印容器将绘制的水印内容设为背景
  mask_div.style.background =
    'url(' + mask_canvas.toDataURL('image/png') + ') left top repeat'
  // 插入水印
  document.body.appendChild(mask_div)
  return id
}

export const waterMark = setting => {
  const settingObj = setting || {}
  // 默认设置
  const defaultSettings = Object.assign(
    {
      watermark_type: 'string', // 水印类型 string：文字 || iamge：图片 || both：图文
      watermark_alpha: 0.5, // 水印透明度
      watermark_zIndex: 9999, // 水印层级
      watermark_angle: 0, // 水印倾斜度
      watermark_pointerEvents: 'none', // 阻断水印点击穿透 none：可穿透
      // 水印容器
      watermarl__container_id: 'waterMark', // 水印容器id
      watermark_container_width: '100%', // 水印容器宽度
      watermark_container_height: '100%', // 水印容器高度
      watermark_container_position: 'fixed', // 水印容器定位方式
      watermark_container_x: 0, // 水印容器x轴坐标
      watermark_container_y: 0, // 水印容器y轴坐标
      // 水印内容
      watermark_content_width: 300, // 水印内容宽度
      watermark_content_height: 150, // 水印内容高度
      watermark_content_x: 10, // 水印内容X轴坐标
      watermark_content_y: 130, // 水印内容Y轴坐标
      watermark_content_spaceX: 10, // 多个水印内容X轴间隙
      watermark_content_spaceY: 0, // 多个水印内容Y轴间隙
      watermark_content_fontSize: 16, // 水印内容字体大小
      watermark_content_font: 'Vedana', // 水印内容字体
      watermark_content_textAlign: 'left', // 水印内容水平对齐方式
      watermark_content_textBaseline: 'Middle', // 水印内容对齐基线
      watermark_content_color: '#c8c8c8', // 水印内容颜色 若需字体透明 "#xxxxxx00"-"#xxxxxxff" 00:0% || ff:100%
      watermark_content_rotate: (-20 * Math.PI) / 180, // 水印内容倾斜度
      watermark_content_txt: 'waterMark', // 水印默认内容
      watermark_content_img: '' // 水印默认图片
    },
    settingObj
  )
  // 清除旧水印
  const id = defaultSettings.watermarl__container_id
  if (document.getElementById(id) !== null) {
    document.querySelector(`#${id}`).remove()
  }
  // 创建水印容器
  const mask_div = document.createElement('div')
  mask_div.id = id
  // 设置水印容器样式
  mask_div.style.position = defaultSettings.watermark_container_position
  mask_div.style.left = defaultSettings.watermark_container_x + 'px'
  mask_div.style.top = defaultSettings.watermark_container_y + 'px'
  mask_div.style.zIndex = defaultSettings.watermark_zIndex
  mask_div.style.overflow = 'hidden'
  // mask_div.style.filter="alpha(opacity=50)" // 兼容IE9以下的透明度设置 ;
  mask_div.style.opacity = defaultSettings.watermark_alpha
  mask_div.style.width = defaultSettings.watermark_container_width
  mask_div.style.height = defaultSettings.watermark_container_height
  mask_div.style.transform =
    'rotate(-' + defaultSettings.watermark_angle + 'deg)'
  mask_div.style.OTransform =
    'rotate(-' + defaultSettings.watermark_angle + 'deg)'
  mask_div.style.msTransform =
    'rotate(-' + defaultSettings.watermark_angle + 'deg)'
  mask_div.style.MozTransform =
    'rotate(-' + defaultSettings.watermark_angle + 'deg)'
  mask_div.style.webkitTransform =
    'rotate(-' + defaultSettings.watermark_angle + 'deg)'
  mask_div.style.pointerEvents = defaultSettings.watermark_pointerEvents // 水印不遮挡页面的点击事件
  // 绘制水印内容
  const mask_canvas = document.createElement('canvas')
  mask_canvas.width = defaultSettings.watermark_content_width
  mask_canvas.height = defaultSettings.watermark_content_height
  const mask_context = mask_canvas.getContext('2d')
  mask_context.rotate(defaultSettings.watermark_content_rotate) // 水印内容倾斜度
  function drawImg () {
    const img = document.createElement('img')
    img.src = defaultSettings.watermark_content_img
    img.style.display = 'none'
    document.body.appendChild(img)
    img.onload = function () {
      mask_context.drawImage(
        img,
        defaultSettings.watermark_content_x,
        defaultSettings.watermark_content_y,
        img.width,
        img.height
      )
      mask_div.style.background =
        'url(' + mask_canvas.toDataURL('image/png') + ') left top repeat'
      document.body.removeChild(img)
    }
  }
  function drawStr () {
    mask_context.font = `${defaultSettings.watermark_content_fontSize}px ${defaultSettings.watermark_content_font}`
    mask_context.fillStyle = defaultSettings.watermark_content_color
    mask_context.textAlign = defaultSettings.watermark_content_textAlign
    mask_context.textBaseline = defaultSettings.watermark_content_textBaseline
    mask_context.fillText(
      defaultSettings.watermark_content_txt,
      defaultSettings.watermark_content_x,
      defaultSettings.watermark_content_y
    )
  }
  if (defaultSettings.watermark_type === 'image') {
    drawImg()
  } else if (defaultSettings.watermark_type === 'string') {
    drawStr()
  } else if (defaultSettings.watermark_type === 'both') {
    drawImg()
    drawStr()
  }
  // 水印容器将绘制的水印内容设为背景
  mask_div.style.background =
    'url(' + mask_canvas.toDataURL('image/png') + ') left top repeat'
  // 插入水印
  document.body.appendChild(mask_div)
  return id
}